<template>
  <div>
    <!-- 上端导航 -->
    <div class="header"><!--日期选择-->
        <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      
      <el-select v-model="cerStatus" clearable placeholder="请选择状态"><!--选择状态-->
        <el-option label="通过" value="通过" />
        <el-option label="不通过" value="不通过" />
        <el-option label="未审核" value="未审核" />
      </el-select>
      <el-input
        v-model="cerNumber"
        placeholder="请输入申请人编号"
        clearable
        style="width: 240px"
      />
       <!-- 查询 -->
      <el-button type="primary" @click="statusIdacrd()">查询</el-button>
      <div class="content">
      <el-table :data="cerData" style="width: 100%">
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <!-- 编号 -->
        <el-table-column prop="userId" label="编号" align="center" />
        <!-- 用户名 -->
        <el-table-column prop="realname" label="姓名" align="center" />
        <!-- 姓名 -->
        <el-table-column prop="applyTime" label="申请时间" align="center" >
        <template slot-scope="scope">
            {{ scope.row.applyTime | fmtDate}}
          </template>
        </el-table-column>
        <!-- 手机号 -->
        <el-table-column prop="idCard" label="身份证号" align="center" />
        <!-- 性别 -->
        <el-table-column prop="idcardPhotoPositive" label="身份证正面" align="center">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <el-image
              style="width: 80px; height: 80px"
              :src="scope.row.idcardPhotoPositive"
              :preview-src-list="[scope.row.idcardPhotoPositive]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="idcardPhotoNegative" label="身份证反面" align="center">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <el-image
              style="width: 80px; height: 80px"
              :src="scope.row.idcardPhotoNegative"
              :preview-src-list="[scope.row.idcardPhotoNegative]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="bankCard" label="银行卡号" align="center" />
        <el-table-column prop="bankCard" label="银行卡号" align="center" />
        <!-- 状态 -->
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status =='通过' ? 'success' : scope.row.status =='不通过' ? 'info':'danger'">{{
              scope.row.status
            }}</el-tag>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center">
          <template slot-scope="scope"> <!--作用域插槽 -->
            <el-button type="text" size="small" v-if="scope.row.status=='未审核'" @click="pass(scope.row.id)">
              通过
            </el-button>
            <el-button type="text" size="small" v-if="scope.row.status=='未审核'" style="color:red;" @click="nopass(scope.row.id)">
              不通过
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    </div>
    <!-- 底部分页区域 -->
    <div class="paginetion">
      <!-- 分页组件 -->
      <el-pagination
        :hide-on-single-page="valuerf"
        :page-sizes="[2, 4, 6]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { get, post } from '@/utils/request'
export default {
  data() {
    return {
        currentPage: '1', // 当前的页码
        total: 7, // 总条目数
        valuerf: false, // 在只有一页的时候禁止翻页
        cerData:[],//认证的所有数据
        cerNumber:null,//输入的申请编号
        cerStatus:null,//选择的申请状态
        page:1,
        pageSize:4,
        onstatus:'',//当前状态
        time1:0,//起始时间
        time2:0,//结束时间
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        value1: '',
        value2: ''
      };
  },
  computed: {},
  methods: {
    async getAllcertifi(){
      if(this.cerStatus==''){
        this.cerStatus=null
      }
      if(this.cerNumber==''){
        this.cerNumber=null
      }
      if(this.cerStatus==''){
        this.cerStatus=null
      }
      if(!this.time1){
        this.time1=null
      }
      if(!this.time2){
        this.time2=null
      }
      let data={
          page:this.currentPage,
          pageSize:this.pageSize,
          status:this.cerStatus,
          userId:this.cerNumber,
          beginTime:this.time1,
          endTime:this.time2,
      }
      let res = await get('/certification/pageQueryCertificationApply',data)
      console.log(res);
      this.cerData=res.data.list
      this.total = res.data.total
      this.time1=null
      this.time2=null 
    },
    handleSizeChange(val) {
      // 将每页要展示的数据的条数 进行一个更新
      this.pageSize = val
      // 将当前的页数 重置到第一页
      this.currentPage = 1
      // 重新调用获取所有产品数据的方法
      this.getAllcertifi()
    },
    handleCurrentChange(val) { // 当前页面数
      this.currentPage = val
      this.getAllcertifi()
    },
    statusIdacrd(){
        //将时间转换为林威治时间数值
      if(this.value2 != null){
        this.time2 = new Date(this.value2[1]).getTime();
        this.time1 = new Date(this.value2[0]).getTime();
      }
      if(this.value2 == null){
        this.time2 = null
        this.time1 = null
      }
      this.currentPage = 1
      this.getAllcertifi()
      this.time2 = null
        this.time1 = null
    },
   async pass(id){
      console.log(id);
      let data={
        id:id
      }
      let res=await get('/certification/checkPass',data)
      if (res.status == 200) {
            this.$message({
              message: res.message,
              type: 'success'
            })
            // 重新刷新页面的数据

            this.getAllcertifi()
            // 调用关闭模态框的方法
          } else {
            this.$message.error(res.message)
          }
    },
    async nopass(id){
      console.log(id);
      let data={
        id:id
      }
      let res=await get('/certification/checkNoPass',data)
      if (res.status == 200) {
            this.$message({
              message: res.message,
              type: 'success'
            })
            // 重新刷新页面的数据

            this.getAllcertifi()
            // 调用关闭模态框的方法
          } else {
            this.$message.error(res.message)
          }
    }
  },
  created() {
    this.getAllcertifi()
  },
  mounted() {},
};
</script>
<style scoped>
.header{
  margin-top: 10px;
  margin-left: 10px;
}
.el-input{
  margin-right: 5px;
}
</style>